<template>
  <div class="app-container">
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>
          说明：目前支持学科和关键字条件筛选
        </span>
        <el-button
          style="float: right; padding: 8px 8px"
          type="success"
          icon="el-icon-edit"
          size="medium"
          @click="$router.push('new')"
        >新增试题</el-button>
      </div>
      <!-- form表单 -->
      <el-form
        :model="Form"
        ref="searchForm"
        class=""
        label-width="80px"
      >
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width:100%"
                v-model="Form.subjectID"
                placeholder="请选择"
                @change="yijimulu(Form.subjectID)"
              >
                <el-option
                  v-for="(item, index) in DataReception.sub"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                style="width:100%"
                v-model="Form.twomulu"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in directoryNames"
                  :key="index"
                  :value="item.label"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width:100%"
                v-model="Form.tags"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in tag"
                  :key="index"
                  :value="item.label"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="Form.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width:100%"
                v-model="Form.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in DataReception.qtt"
                  :key="index"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                style="width:100%"
                v-model="Form.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in DataReception.dft"
                  :key="index"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                style="width:100%"
                v-model="Form.region"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in DataReception.det"
                  :key="index"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                style="width:100%"
                v-model="Form.creatorID"
                placeholder="请选择"
              >
                <el-option
                  label="admin"
                  value="admin"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                v-model="Form.remarks"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                v-model="Form.shortName"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                style="width:50%"
                placeholder="请选择"
                @change="handleProvince"
                v-model="Form.province"
              >
                <el-option
                  v-for="item in citySelect.province"
                  :label="item"
                  :key="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                style="width:50%"
                placeholder="请选择"
                v-model="Form.city"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button
                class="qingchu"
                @click="clearForm"
              >清除</el-button>
              <el-button
                class="chaxun"
                type="primary"
                @click="querybtn"
              >查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据展示 -->
      <template>
        <!-- tab栏切换 -->
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="全部"
            name="first"
          >
            <div class="huise">
              <i class="el-icon-info"></i>
              数据一共{{tableData.counts}}条
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="待审核"
            name="second"
          >
            <div class="huise">
              <i class="el-icon-info"></i>
              数据一共{{tableData.counts}}条
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="已审核"
            name="third"
          >
            <div class="huise">
              <i class="el-icon-info"></i>
              数据一共{{tableData.counts}}条
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="已拒绝"
            name="fourth"
          >
            <div class="huise">
              <i class="el-icon-info"></i>
              数据一共{{tableData.counts}}条
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 表格 -->
        <el-table
          class="biaoge"
          :data="tableData.items"
          border
          style="width: 100%"
        >
          <!-- 试题编号 -->
          <el-table-column
            fixed
            prop="number"
            label="试题编号"
            width="160px"
          >
          </el-table-column>
          <!-- 学科 -->
          <el-table-column
            prop="subject"
            label="学科"
            width="120px"
          >
          </el-table-column>
          <!-- 目录 -->
          <el-table-column
            prop="catalog"
            label="目录"
            width="120px"
          >
          </el-table-column>
          <!-- 题型 -->
          <el-table-column
            label="题型"
            width="120px"
          >
            <span
              slot-scope="scope"
              v-if="scope.row.questionType==1"
            >单选</span>
            <span v-else-if="scope.row.questionType==2">多选</span>
            <span v-else>简答</span>
          </el-table-column>
          <!-- 题干 -->
          <el-table-column
            prop="question"
            label="题干"
            width="400px"
          >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column
            label="录入时间"
            width="200px"
          >
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="80px"
            label="难度"
          >
            <span
              slot-scope="scope"
              v-if="scope.row.difficulty==1"
            >简单</span>
            <span v-else-if="scope.row.difficulty==2">一般</span>
            <span v-else>困难</span>
          </el-table-column>
          <!-- 录入时间 -->
          <!-- 录入人 -->
          <el-table-column
            prop="creator"
            label="录入人"
            width="120px"
          >
          </el-table-column>
          <!-- 审核状态 -->
          <el-table-column
            prop="chkState"
            label="审核状态"
          >
            <span
              slot-scope="scope"
              v-if="scope.row.chkState==0"
            >待审核</span>
            <span v-else-if="scope.row.chkState==1">通过</span>
            <span v-else>拒绝</span>
          </el-table-column>
          <!-- 审核意见 -->
          <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="160px"
          >
          </el-table-column>
          <!-- 审核人 -->
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120px"
          >
          </el-table-column>
          <!-- 发布状态 -->
          <el-table-column
            label="发布状态"
            width="80px"
          >
            <span
              slot-scope="scope"
              v-if="scope.row.chkState==1"
            >待发布</span>
            <span v-else-if="scope.row.chkState==2">已发布</span>
            <span v-else>已下架</span>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            fixed="right"
            label="操作"
            width="220px"
          >
            <template slot-scope="scope">
              <el-button
                @click="yulan(scope.row)"
                type="text"
                size="small"
              >预览</el-button>
              <el-button
                v-if="scope.row.chkState==0"
                @click="shenhekuang(scope.row)"
                type="text"
                size="small"
              >审核</el-button>
              <span
                class="shenhewenzi"
                v-else
              >审核</span>
              <el-button
                type="text"
                size="small"
                @click="$router.push({ name: 'questions-new', query:{ id:scope.row.id }})"
              >修改</el-button>
              <el-button
                v-if="scope.row.publishState==1"
                type="text"
                size="small"
                @click="shanhjiaanniu(scope.row)"
              >上架</el-button>
              <el-button
                v-else-if="scope.row.publishState==0"
                type="text"
                size="small"
                @click="shanhjiaanniu(scope.row)"
              >下架</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteanniu(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestParameters.page"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="requestParameters.pagesize"
            layout=" sizes, prev, pager, next, jumper"
            :total="tableData.counts"
          >
          </el-pagination>
        </div>
      </template>
      <!-- 弹出对话框 -->
      <!-- 预览弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="900px"
        :before-close="handleClose"
      >
        <div>
          <span class="tanspan">
            【题型】:
            <span v-if="yulansjjs.questionType==1">单选</span>
            <span v-else-if="yulansjjs.questionType==2">多选</span>
            <span v-else>简答</span>
          </span>
          <span class="tanspan">【编号】:{{yulansjjs.id}}</span>
          <span class="tanspan">【难度】:
            <span v-if="yulansjjs.difficulty==1">简单</span>
            <span v-else-if="yulansjjs.difficulty==2">一般</span>
            <span v-else>困难</span>
          </span>
          <span class="tanspan">【标签】:{{yulansjjs.tags}}</span>
          <span class="tanspan">【学科】:{{yulansjjs.subjectName}}</span>
          <span class="tanspan">【目录】:{{yulansjjs.directoryName}}</span>
          <span class="tanspan">【方向】:{{yulansjjs.direction}}</span>
        </div>
        <el-divider></el-divider>
        <div>
          <span>【题干】:
            <div
              v-html="yulansjjs.question"
              class=""
            ></div>
          </span>
          <!-- 单选 -->
          <div
            class="danxuan"
            v-if="yulansjjs.questionType==='1'"
          >
            <span>单选题 选项：（以下选中的选项为正确答案）</span>
            <div class="felxbuju">
              <el-radio
                v-for="item in yulansjjs.options"
                :key="item.id"
                :value="item.isRight"
                :label="1"
              >{{item.title}}</el-radio>
            </div>
          </div>
          <!-- 多选 -->
          <div
            class="duoxuan"
            v-else-if="yulansjjs.questionType==='2'"
          >
            <span>多选题 选项：（以下选中的选项为正确答案）</span>
            <div class="felxbuju">
              <el-checkbox
                v-for="item in yulansjjs.options"
                :key="item.id"
                :value="item.isRight"
                :checked="item.isRight"
                :label="1"
              >{{item.title}}</el-checkbox>
            </div>
          </div>
          <div
            class="jianda"
            v-else
          >
            <span>多选题 选项：（以下选中的选项为正确答案）</span>
            <div><span>答案：略</span></div>
          </div>
          <el-divider></el-divider>
          <div>
            <span>【参考答案】:</span>
            <el-button
              type="danger"
              size="small"
              @click="divvideo=true"
            >视频答案预览</el-button>
            <!-- 视频隐藏 -->
            <div v-if="divvideo">
              <video class="shipin"></video>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <span>【答案解析】: <div v-html="ylsj.answer"></div></span>
        <el-divider></el-divider>
        <span>【题目备注】:</span>

        <!-- 按钮 -->
        <span
          slot="footer"
          class="dialog-footer closeylk"
        >
          <el-button
            type="primary"
            @click="gbyulan"
          >关 闭</el-button>
        </span>
      </el-dialog>
      <!-- 审核对话框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="SHdialogVisible"
        width="400px"
        :before-close="handleClose"
      >
        <span>
          <template>
            <el-radio
              v-model="shenhe.chkState"
              label="1"
              @click="shenhetong"
            >通过</el-radio>
            <el-radio
              v-model="shenhe.chkState"
              label="2"
              @click="shenhetong()"
            >拒绝</el-radio>
          </template>
        </span>
        <!-- 文本域高度可通过 rows 属性控制 -->

        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入审核意见"
          v-model="textarea"
          class="shenheyijian"
        >
        </el-input>
        <span
          slot="footer"
          class="dialog-footer shenheanniu"
        >
          <el-button @click="SHdialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="shenhetong"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 上下架对话 -->
    </el-card>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as simples } from '@/api/hmmm/directorys'
import { choice, choiceAdd, choicePublish, choiceCheck, detail } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as bqsimple } from '@/api/hmmm/tags'
// import { questionType as questionTypes, direction as directions, difficulty as difficultys, status as statusT } from '@/api/hmmm/api/constants'
export default {
  // 组件名称
  name: 'ppppp',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  divvideo: false,
  data () {
    return {
      // 二级目录返回数据接收
      directoryNames: {},
      // 标签返回数据
      tag: [],
      // form表单
      Form: {
        // 科目
        subjectID: null,
        // 二级目录
        twomulu: null,
        // 标签接受
        tags: null,
        // 难度
        difficulty: null,
        // 类型
        questionType: null,
        // 方向
        direction: null,
        // 获取录入人
        creatorID: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 城市
        province: null,
        // 县
        city: null
      },
      // 下拉框数据接收
      DataReception: {
        sub: [],
        // 试题类型
        qtt: [],
        // 难度
        dft: [],
        // 方向
        det: [],
        // 获取录入人
        ctID: []
      },
      // 文本域
      textarea: '',
      // 定义请求参数
      requestParameters: {
        page: 1,
        pagesize: 2
      },
      // formInline: {
      //   user: '',
      //   region: ''
      // },
      // tab栏默认选中
      activeName: 'first',
      // 快递定义
      citySelect: {
        province: [],
        cityDate: []
      },
      // 定义题库数据表
      tableData: [],
      // // 定义数据详情
      // sjxq: {},
      // 预览数据接受
      ylsj: {},
      // 预览对话框默认隐藏
      dialogVisible: false,
      divvideo: false,
      SHdialogVisible: false,
      // 审核
      shenhe: {},
      // 预览数据接受
      yulansjjs: {},
      // 选项接收
      xuanxiangjs: '1'
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
*/
  created () {
    this.getCityData()
    this.onSubjectChange()
    this.ceshi()
    this.getsub()
    this.getqtt()
    this.getdft()
    this.getdet()
    this.defaultForm = JSON.parse(JSON.stringify(this.Form))
  },
  mounted () { },
  // 组件方法
  methods: {
    // 获取学科
    async getsub () {
      const { data } = await simple()
      // console.log(data)
      this.DataReception.sub = data
    },
    // 学科触发事件
    async yijimulu (id) {
      this.Form.twomulu = ''
      this.Form.tags = ''
      const { data } = await simples({ subjectID: id })
      const { data: res } = await bqsimple({ subjectID: id })
      this.directoryNames = data
      this.tag = res
      // console.log(res)
    },
    // 获取题型
    getqtt: function () {
      this.DataReception.qtt = questionType
    },
    // 题目难度
    getdft: function () {
      this.DataReception.dft = difficulty
    },
    // 获取方向
    getdet: function () {
      this.DataReception.det = direction
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选择省市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 清空表单按钮
    clearForm () {
      this.Form = JSON.parse(JSON.stringify(this.defaultForm))
    },
    // 查询按钮
    querybtn () {
      this.onSubjectChange(this.Form)
    },
    // 获取详细数据
    async onSubjectChange (obj) {
      const { data } = await choice({ ...this.requestParameters, ...obj })
      this.tableData = data
    },
    // 点击切换tab栏
    async handleClick () {
      // chkState审核状态
      let id = null
      // console.log(this.activeName)
      if (this.activeName === 'second') {
        id = 0
      } else if (this.activeName === 'third') {
        id = 1
      } else if (this.activeName === 'fourth') {
        id = 2
      } else {

      }
      this.requestParameters.chkState = id
      this.onSubjectChange(this.requestParameters.chkState || {})
    },
    // 改变pagesize变化
    handleSizeChange (newSize) {
      this.requestParameters.pagesize = newSize
      this.onSubjectChange()
    },
    // 改变pagenum(当前页数)变化
    handleCurrentChange (newPage) {
      this.requestParameters.page = newPage
      this.onSubjectChange()
    },
    // 预览
    async yulan (row) {
      this.dialogVisible = true
      this.ylsj = row
      const { data } = await detail({ id: this.ylsj.id })
      this.yulansjjs = data
      console.log(this.yulansjjs)
    },
    // 关闭预览弹窗
    gbyulan () {
      this.dialogVisible = false
      this.divvideo = false
    },
    // 审核按钮绑定事件
    async shenhekuang (shzt) {
      this.SHdialogVisible = true
      this.shenhe = shzt
      console.log(shzt)
    },
    // 审核
    async shenhetong () {
      console.log(this.shenhe)
      const { data } = await choiceCheck({ id: this.shenhe.id, chkState: this.shenhe.chkState - 0, chkRemarks: this.textarea })
      console.log(data)
      this.onSubjectChange()
      this.SHdialogVisible = false
    },
    // 上下架按钮
    shanhjiaanniu (sxj) {
      this.$confirm('确定要对当前内容进行操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await choicePublish({ id: sxj.id, publishState: sxj.publishState ? 0 : 1 })
        console.log(data)
        this.onSubjectChange()
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {

      })
    },
    // 删除操作
    deleteanniu (delID) {
      this.$confirm('此操作将永久删除该道题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id: delID, choiceState: 0 })
        // console.log(data)
        this.onSubjectChange()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

      })
    },
    ceshi () {
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.divvideo = false
        })
        .catch(_ => { })
      // this.divvideo = false
    },
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  min-width: 1050px;
  // 卡片视图
  .box-card {
    .clearfix {
      span {
        font-size: 12px;
        color: #ffc0cb;
      }
    }
  }
  // form表单
  .demo-form-inline {
    white-space: nowrap;
  }
  // 数据展示
  .huise {
    padding: 8px 18px;
    background: #f4f4f5;
    font-size: 13px;
    color: #909399;
    i {
      font-size: 16px;
    }
  }
  // 表单
  .biaoge {
    margin-top: 20px;
  }
  // 分页
  .block {
    margin-top: 15px;
    text-align: right;
  }
  .tanspan {
    display: inline-block;
    width: 200px;
    margin-top: 20px;
  }
  .el-radio {
    margin-top: 15px;
  }
  .felxbuju {
    display: flex;
    flex-direction: column;
  }
  .shipin {
    height: 300px;
    width: 500px;
    background-color: #000;
  }
  // 关闭按钮
  .closeylk {
    margin-right: -500px;
  }
  // 审核意见文本域
  .shenheyijian {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .shenheanniu {
    margin-right: -200px;
  }
  // 审核文字样式
  .shenhewenzi {
    display: inline-block;
    font-size: 12px;
    margin: 0 10px;
  }
}
</style>
